<template>
	<view class="audio-player">
		<view class="player-header">
			<image class="header-bg" :src="iconUrls.headerBg" mode="aspectFill"></image>
			<view class="screen-control">
				<switch :checked="keepScreenOn" @change="toggleScreenOn" color="#4CD964" style="transform: scale(0.7);" />
				<text>{{ keepScreenOn ? '常亮' : '自动' }}</text>
			</view>
			<text class="title">晨读趁早</text>
			<view class="share-btn" @tap="showShareMenu">
				<image :src="iconUrls.share"></image>
			</view>
		</view>
		
		<view class="player-content">
			<view class="current-audio">
				<image class="music-icon" :class="{ playing: isPlaying }" :src="iconUrls.musicNote"></image>
				<text class="audio-name">{{ formatFileName(currentAudio.name) || '未选择音频' }}</text>
				<view class="play-mode" @tap="changePlayMode">
					<image :src="playModeIcon"></image>
				</view>
			</view>
			
			<!-- 添加进度条和A-B跟读控制 -->
			<view class="progress-container" v-if="currentAudio.path">
				<view class="time-info">
					<text>{{ formatTime(currentTime) }}</text>
					<text>{{ formatTime(duration) }}</text>
				</view>
				<view class="progress-bar" @tap="seek">
					<view class="progress-bg"></view>
					<view class="progress-current" :style="{ width: progress + '%' }"></view>
					<view class="point-a" v-if="pointA >= 0" :style="{ left: (pointA / duration * 100) + '%' }"></view>
					<view class="point-b" v-if="pointB >= 0" :style="{ left: (pointB / duration * 100) + '%' }"></view>
				</view>
				<view class="ab-controls">
					<button 
						class="ab-btn" 
						:class="{ active: pointA >= 0 }" 
						@tap="setPointA"
					>A点</button>
					<button 
						class="ab-btn" 
						:class="{ active: pointB >= 0 }" 
						@tap="setPointB"
					>B点</button>
					<button 
						class="ab-btn clear" 
						@tap="clearABPoints"
						v-if="pointA >= 0 || pointB >= 0"
					>清除</button>
				</view>
			</view>
			
			<view class="controls">
				<view class="control-btn prev" @tap="prevAudio" :class="{ disabled: !audioList.length }">
					<image :src="iconUrls.prev"></image>
				</view>
				<view class="control-btn play" @tap="playOrPause">
					<image :src="isPlaying ? iconUrls.pause : iconUrls.play"></image>
				</view>
				<view class="control-btn next" @tap="nextAudio" :class="{ disabled: !audioList.length }">
					<image :src="iconUrls.next"></image>
				</view>
			</view>
			
			<view class="playlist">
				<view class="playlist-header">
					<text class="section-title">音频列表</text>
					<view class="header-actions">
						<view class="clear-btn" @tap="clearAllAudio" v-if="audioList.length > 0">
							<image :src="iconUrls.delete"></image>
							<text>清空</text>
						</view>
						<view class="add-btn" @tap="chooseAudio">
							<image :src="iconUrls.add"></image>
							<text>添加音频</text>
						</view>
					</view>
				</view>
				<view class="playlist-content">
					<view 
						v-for="(audio, index) in audioList" 
						:key="index"
						class="playlist-item"
						:class="{ active: currentIndex === index }"
						@tap="playAudio(index)"
					>
						<view class="playlist-item-content">
							<image class="item-icon" :src="iconUrls.story"></image>
							<text class="item-name">{{ formatFileName(audio.name) }}</text>
						</view>
						<view class="playlist-item-actions">
							<text class="duration-text">{{ formatTime(audio.duration) }}</text>
							<view class="delete-btn" @tap.stop="deleteAudio(index)">
								<image :src="iconUrls.delete"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { icons } from '../../static/icons.js'
import { shareCover } from '../../static/share-cover.js'

export default {
	// 分享给好友
	onShareAppMessage(res) {
		return {
			title: '晨读趁早 - 让阅读成为习惯',
			path: '/pages/index/index',
			imageUrl: shareCover
		}
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: '晨读趁早 - 让阅读成为习惯',
			query: '',
			imageUrl: shareCover
		}
	},
	setup() {
		const audioList = ref([])
		const currentIndex = ref(-1)
		const currentAudio = ref({})
		const isPlaying = ref(false)
		const audioContext = ref(null)
		const currentTime = ref(0)
		const duration = ref(0)
		const pointA = ref(-1)
		const pointB = ref(-1)
		const isABLoop = ref(false)
		// 添加屏幕常亮控制
		const keepScreenOn = ref(false)

		// 计算进度百分比
		const progress = computed(() => {
			if (!duration.value) return 0
			const progressValue = (currentTime.value / duration.value) * 100
			console.log('Progress computed:', progressValue)
			return progressValue
		})

		// 格式化时间
		const formatTime = (time) => {
			const minutes = Math.floor(time / 60)
			const seconds = Math.floor(time % 60)
			return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
		}

		// 格式化文件名
		const formatFileName = (fileName, maxLength = 20) => {
			if (!fileName) return ''
			if (fileName.length <= maxLength) return fileName
			
			const ext = fileName.split('.').pop()
			const nameWithoutExt = fileName.slice(0, -(ext.length + 1))
			const truncatedName = nameWithoutExt.slice(0, maxLength - 3) + '...' + ext
			return truncatedName
		}

		// 图标资源
		const iconUrls = {
			headerBg: icons.headerBg,
			musicNote: icons.musicNote,
			play: icons.play,
			pause: icons.pause,
			prev: icons.prev,
			next: icons.next,
			add: icons.add,
			story: icons.story,
			delete: icons.delete,
			share: icons.share  // 添加分享图标
		}

		// 切换屏幕常亮状态
		const toggleScreenOn = (e) => {
			keepScreenOn.value = e.detail.value
			uni.setKeepScreenOn({
				keepScreenOn: keepScreenOn.value
			})
			// 保存设置到本地存储
			uni.setStorageSync('keepScreenOn', keepScreenOn.value)
			
			// 显示提示
			uni.showToast({
				title: keepScreenOn.value ? '已开启屏幕常亮' : '已恢复自动熄屏',
				icon: 'none'
			})
		}

		// 初始化音频管理器
		onMounted(() => {
			audioContext.value = uni.createInnerAudioContext()
			
			// 监听音频播放进度
			audioContext.value.onTimeUpdate(() => {
				currentTime.value = audioContext.value.currentTime || 0
				
				// 如果duration还未获取到，尝试再次获取
				if (!duration.value && audioContext.value.duration) {
					duration.value = audioContext.value.duration
				}
				
				// A-B循环逻辑
				if (isABLoop.value && pointB.value >= 0 && pointA.value >= 0) {
					// 添加一个小的缓冲区，确保能够捕捉到B点
					if (currentTime.value >= (pointB.value - 0.1)) {
						audioContext.value.seek(pointA.value)
						// 添加一个小延迟后再开始播放，避免可能的播放状态问题
						setTimeout(() => {
							if (isABLoop.value) {
								audioContext.value.play()
							}
						}, 50)
					}
				}
			})
			
			// 监听音频加载完成
			audioContext.value.onCanplay(() => {
				// 设置定时器等待一下再获取duration
				setTimeout(() => {
					if (audioContext.value && audioContext.value.duration) {
						duration.value = audioContext.value.duration
					}
				}, 100)
			})
			
			// 监听音频错误
			audioContext.value.onError(() => {
				uni.showToast({
					title: '音频加载失败',
					icon: 'none'
				})
			})
			
			// 监听播放结束
			audioContext.value.onEnded(() => {
				if (!isABLoop.value) {
					nextAudio()
				}
			})
			
			// 从本地存储加载播放列表和上次播放状态
			loadAudioList()
			
			// 从本地存储加载屏幕常亮设置
			try {
				const setting = uni.getStorageSync('keepScreenOn')
				if (setting !== '') {
					keepScreenOn.value = setting
					// 如果设置为常亮，立即应用
					if (keepScreenOn.value) {
						uni.setKeepScreenOn({
							keepScreenOn: true
						})
					}
				}
			} catch (e) {
				console.error('加载屏幕设置失败:', e)
			}
			
			// 显示锁屏提示
			uni.showModal({
				title: '温馨提示',
				content: '由于微信限制，锁屏时音频会暂停播放。建议打开"保持屏幕常亮"功能以获得最佳体验。',
				showCancel: false,
				confirmText: '我知道了'
			})
		})

		onUnmounted(() => {
			if (audioContext.value) {
				audioContext.value.destroy()
			}
		})

		// 加载播放列表
		const loadAudioList = () => {
			try {
				// 加载播放列表
				const storageList = uni.getStorageSync('audioList') || []
				audioList.value = storageList
				
				// 加载上次播放状态
				const lastPlayState = uni.getStorageSync('lastPlayState') || {}
				if (lastPlayState.audioId && audioList.value.length > 0) {
					// 查找上次播放的音频
					const lastIndex = audioList.value.findIndex(audio => audio.id === lastPlayState.audioId)
					if (lastIndex !== -1) {
						currentIndex.value = lastIndex
						currentAudio.value = audioList.value[lastIndex]
						// 设置音频源但不自动播放
						if (audioContext.value) {
							audioContext.value.src = currentAudio.value.path
						}
					}
				}
				
				console.log('加载播放列表:', audioList.value)
				console.log('恢复播放状态:', lastPlayState)
				
				if (audioList.value.length === 0) {
					uni.showToast({
						title: '播放列表为空',
						icon: 'none'
					})
				}
			} catch (e) {
				console.error('加载播放列表失败:', e)
				uni.showToast({
					title: '加载播放列表失败',
					icon: 'none'
				})
			}
		}

		// 保存播放状态
		const savePlayState = () => {
			try {
				const playState = {
					audioId: currentAudio.value.id,
					timestamp: Date.now()
				}
				uni.setStorageSync('lastPlayState', playState)
			} catch (e) {
				console.error('保存播放状态失败:', e)
			}
		}

		// 选择音频文件
		const chooseAudio = async () => {
			// 显示操作菜单
			uni.showActionSheet({
				itemList: ['从聊天记录导入', '从本地选择'],
				success: async (res) => {
					try {
						let chooseRes
						if (res.tapIndex === 0) {
							// 从聊天记录导入
							chooseRes = await uni.chooseMessageFile({
								count: 9,
								type: 'file',
								extension: ['mp3', 'wav', 'm4a']
							})
							
							if (chooseRes.tempFiles) {
								handleSelectedFiles(chooseRes.tempFiles)
							}
						} else {
							// 从本地选择
							// #ifdef H5 || APP-PLUS
							chooseRes = await uni.chooseFile({
								count: 9,
								type: 'file',
								extension: ['mp3', 'wav', 'm4a']
							})
							
							if (chooseRes.tempFiles) {
								handleSelectedFiles(chooseRes.tempFiles)
							}
							// #endif
							
							// #ifdef MP-WEIXIN
							uni.showModal({
								title: '提示',
								content: '微信小程序暂不支持直接选择本地音频文件，请先将音频发送到聊天记录，然后从聊天记录导入。',
								showCancel: false
							})
							// #endif
						}
					} catch (e) {
						console.error('选择音频失败:', e)
						uni.showToast({
							title: e.errMsg || '选择音频失败',
							icon: 'none',
							duration: 2000
						})
					}
				},
				fail: (err) => {
					console.log('用户取消选择')
				}
			})
		}
		
		// 处理选中的文件
		const handleSelectedFiles = (files) => {
			if (!files || files.length === 0) return
			
			// 显示loading提示
			uni.showLoading({
				title: '正在添加音频...',
				mask: true
			})
			
			// 处理所有选中的文件
			const newAudios = []
			const invalidFiles = []
			
			const processFile = (file) => {
				return new Promise((resolve) => {
					// 检查文件大小（限制为 10MB）
					if (file.size > 10 * 1024 * 1024) {
						invalidFiles.push(`${file.name}（文件过大）`)
						resolve()
						return
					}
					
					// 检查文件类型
					const fileExt = file.name.split('.').pop().toLowerCase()
					if (!['mp3', 'wav', 'm4a'].includes(fileExt)) {
						invalidFiles.push(`${file.name}（格式不支持）`)
						resolve()
						return
					}

					// 检查是否已存在相同文件名的音频
					const existingIndex = audioList.value.findIndex(item => item.name === file.name)
					if (existingIndex !== -1) {
						// 直接播放已存在的音频
						playAudio(existingIndex)
						resolve()
						return
					}
					
					// 创建新的音频记录
					const newAudio = {
						id: Date.now().toString() + newAudios.length,
						name: file.name,
						path: file.tempFilePath || file.path,
						createTime: new Date().getTime(),
						duration: 0 // 初始化时长为0
					}
					
					// 创建临时的 AudioContext 来获取音频时长
					const tempAudio = uni.createInnerAudioContext()
					tempAudio.src = newAudio.path
					
					let timeoutId = null
					let hasResolved = false
					
					const cleanup = () => {
						if (timeoutId) {
							clearTimeout(timeoutId)
						}
						if (tempAudio) {
							tempAudio.destroy()
						}
					}
					
					// 设置超时处理
					timeoutId = setTimeout(() => {
						if (!hasResolved) {
							console.log('获取音频时长超时:', file.name)
							newAudio.duration = 0
							newAudios.push(newAudio)
							cleanup()
							resolve()
						}
					}, 5000) // 5秒超时
					
					// 监听音频加载完成
					tempAudio.onCanplay(() => {
						console.log('Audio can play:', file.name)
						
						// 尝试多次获取时长
						let attempts = 0
						const maxAttempts = 10
						const checkDuration = () => {
							attempts++
							if (tempAudio.duration && tempAudio.duration !== Infinity) {
								if (!hasResolved) {
									hasResolved = true
									newAudio.duration = tempAudio.duration
									newAudios.push(newAudio)
									cleanup()
									resolve()
								}
							} else if (attempts < maxAttempts) {
								setTimeout(checkDuration, 200)
							} else {
								if (!hasResolved) {
									hasResolved = true
									console.log('Failed to get duration after', maxAttempts, 'attempts:', file.name)
									newAudio.duration = 0
									newAudios.push(newAudio)
									cleanup()
									resolve()
								}
							}
						}
						
						checkDuration()
					})
					
					// 监听错误
					tempAudio.onError((err) => {
						console.error('Error getting audio duration:', file.name, err)
						if (!hasResolved) {
							hasResolved = true
							newAudio.duration = 0
							newAudios.push(newAudio)
							cleanup()
							resolve()
						}
					})
				})
			}
			
			// 串行处理所有文件
			Promise.all(files.map(file => processFile(file)))
				.then(() => {
					// 隐藏loading提示
					uni.hideLoading()
					
					if (newAudios.length > 0) {
						// 添加到播放列表
						audioList.value = [...newAudios, ...audioList.value]
						
						// 保存到本地存储
						try {
							uni.setStorageSync('audioList', audioList.value)
							uni.showToast({
								title: `成功添加${newAudios.length}个文件`,
								icon: 'success'
							})
						} catch (storageError) {
							console.error('保存到本地存储失败:', storageError)
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							})
						}
					}
					
					// 如果有无效文件，显示提示
					if (invalidFiles.length > 0) {
						setTimeout(() => {
							uni.showModal({
								title: '以下文件未能添加',
								content: invalidFiles.join('\n'),
								showCancel: false
							})
						}, 1500)
					}
				})
				.catch((error) => {
					// 发生错误时也要隐藏loading
					uni.hideLoading()
					console.error('处理文件时发生错误:', error)
					uni.showToast({
						title: '添加音频失败',
						icon: 'none'
					})
				})
		}

		// 播放音频
		const playAudio = (index) => {
			if (index < 0 || index >= audioList.value.length) return
			
			// 如果当前有音频在播放，先停止它
			if (audioContext.value) {
				audioContext.value.stop()
				// 停止时关闭屏幕常亮
				uni.setKeepScreenOn({
					keepScreenOn: false
				})
			}
			
			currentIndex.value = index
			currentAudio.value = audioList.value[index]
			
			if (audioContext.value) {
				// 重置状态
				currentTime.value = 0
				duration.value = 0
				
				audioContext.value.src = currentAudio.value.path
				audioContext.value.autoplay = true
				
				// 等待一小段时间后获取duration
				setTimeout(() => {
					if (audioContext.value && audioContext.value.duration) {
						duration.value = audioContext.value.duration
					}
				}, 200)
				
				isPlaying.value = true
				// 播放时保持屏幕常亮
				uni.setKeepScreenOn({
					keepScreenOn: true
				})
				// 保存播放状态
				savePlayState()
			}
		}

		// 播放/暂停
		const playOrPause = () => {
			if (!currentAudio.value.path || !audioContext.value) return
			
			if (isPlaying.value) {
				audioContext.value.pause()
				// 暂停时关闭屏幕常亮
				uni.setKeepScreenOn({
					keepScreenOn: false
				})
			} else {
				audioContext.value.play()
				// 播放时保持屏幕常亮
				uni.setKeepScreenOn({
					keepScreenOn: true
				})
				// 尝试再次获取duration
				if (!duration.value && audioContext.value.duration) {
					duration.value = audioContext.value.duration
				}
			}
			
			isPlaying.value = !isPlaying.value
		}

		// 上一首
		const prevAudio = () => {
			if (audioList.value.length === 0) return
			
			let newIndex = currentIndex.value - 1
			if (newIndex < 0) {
				newIndex = audioList.value.length - 1
			}
			playAudio(newIndex)
		}

		// 下一首
		const nextAudio = () => {
			if (audioList.value.length === 0) return
			
			let newIndex = currentIndex.value + 1
			if (newIndex >= audioList.value.length) {
				newIndex = 0
			}
			playAudio(newIndex)
		}

		// 删除音频
		const deleteAudio = (index) => {
			try {
				const deletedAudio = audioList.value[index]
				audioList.value.splice(index, 1)
				uni.setStorageSync('audioList', audioList.value)
				
				// 如果删除的是当前播放的音频
				if (index === currentIndex.value) {
					if (audioContext.value) {
						audioContext.value.stop()
						// 停止播放时关闭屏幕常亮
						uni.setKeepScreenOn({
							keepScreenOn: false
						})
					}
					currentAudio.value = {}
					currentIndex.value = -1
					isPlaying.value = false
					uni.removeStorageSync('lastPlayState')
				} else if (index < currentIndex.value) {
					currentIndex.value--
				}
				
				const lastPlayState = uni.getStorageSync('lastPlayState') || {}
				if (lastPlayState.audioId === deletedAudio.id) {
					uni.removeStorageSync('lastPlayState')
				}
				
				uni.showToast({
					title: '已删除',
					icon: 'success'
				})
			} catch (e) {
				uni.showToast({
					title: '删除失败',
					icon: 'none'
				})
			}
		}

		// 设置A点
		const setPointA = () => {
			if (!audioContext.value || !currentAudio.value.path) return
			
			pointA.value = currentTime.value
			if (pointB.value >= 0 && pointB.value <= pointA.value) {
				pointB.value = -1
			}
			isABLoop.value = true
			
			uni.showToast({
				title: '已设置A点',
				icon: 'none'
			})
		}

		// 设置B点
		const setPointB = () => {
			if (!audioContext.value || !currentAudio.value.path || pointA.value < 0) {
				uni.showToast({
					title: '请先设置A点',
					icon: 'none'
				})
				return
			}
			
			if (currentTime.value <= pointA.value) {
				uni.showToast({
					title: 'B点需在A点之后',
					icon: 'none'
				})
				return
			}
			
			pointB.value = currentTime.value
			isABLoop.value = true
			
			uni.showToast({
				title: '已设置B点',
				icon: 'none'
			})
		}

		// 清除AB点
		const clearABPoints = () => {
			pointA.value = -1
			pointB.value = -1
			isABLoop.value = false
		}

		// 跳转到指定位置
		const seek = (e) => {
			if (!audioContext.value || !currentAudio.value.path) return
			
			const { left, width } = e.currentTarget.getBoundingClientRect()
			const position = (e.touches[0].clientX - left) / width
			const seekTime = position * duration.value
			
			audioContext.value.seek(seekTime)
		}

		// 显示分享菜单
		const showShareMenu = () => {
			// #ifdef MP-WEIXIN
			// 在微信小程序中，显示分享提示
			uni.showToast({
				title: '点击右上角分享',
				icon: 'none',
				duration: 2000
			})
			// #endif
			
			// #ifdef H5
			uni.showToast({
				title: '请使用微信分享',
				icon: 'none'
			})
			// #endif
			
			// #ifdef APP-PLUS
			// APP环境下，调用系统分享
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 0,
				title: '晨读趁早 - 让阅读成为习惯',
				
				imageUrl: shareCover,
				success: function (res) {
					console.log('分享成功:', res)
				},
				fail: function (err) {
					console.log('分享失败:', err)
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			})
			// #endif
		}

		// 清空音频列表
		const clearAllAudio = () => {
			if (audioList.value.length === 0) return
			
			uni.showModal({
				title: '确认清空',
				content: '确定要清空所有音频吗？此操作不可恢复。',
				success: (res) => {
					if (res.confirm) {
						try {
							// 如果有音频在播放，先停止
							if (audioContext.value) {
								audioContext.value.stop()
								// 停止播放时关闭屏幕常亮
								uni.setKeepScreenOn({
									keepScreenOn: false
								})
							}
							
							// 重置所有状态
							audioList.value = []
							currentAudio.value = {}
							currentIndex.value = -1
							isPlaying.value = false
							currentTime.value = 0
							duration.value = 0
							pointA.value = -1
							pointB.value = -1
							isABLoop.value = false
							
							// 清除存储
							uni.setStorageSync('audioList', [])
							uni.removeStorageSync('lastPlayState')
							
							uni.showToast({
								title: '已清空列表',
								icon: 'success'
							})
						} catch (e) {
							console.error('清空列表失败:', e)
							uni.showToast({
								title: '清空失败',
								icon: 'none'
							})
						}
					}
				}
			})
		}

		return {
			audioList,
			currentIndex,
			currentAudio,
			isPlaying,
			iconUrls,
			chooseAudio,
			clearAllAudio,
			playAudio,
			playOrPause,
			prevAudio,
			nextAudio,
			deleteAudio,
			currentTime,
			duration,
			progress,
			pointA,
			pointB,
			formatTime,
			formatFileName,
			setPointA,
			setPointB,
			clearABPoints,
			seek,
			showShareMenu,
			toggleScreenOn,
			keepScreenOn
		}
	}
}
</script>

<style>
.audio-player {
	min-height: 100vh;
	background-color: #fff8f0;
	padding-bottom: env(safe-area-inset-bottom);
}

.player-header {
	position: relative;
	height: 120rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20rpx;
	background: linear-gradient(to right, rgba(255,107,107,0.05), rgba(255,107,107,0.1));
}

.header-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0.8;
}

.title {
	position: relative;
	z-index: 1;
	font-size: 36rpx;
	font-weight: 600;
	color: #ff6b6b;
	letter-spacing: 2rpx;
}

.player-content {
	padding: 0 30rpx;
}

.current-audio {
	background: #fff;
	border-radius: 24rpx;
	padding: 30rpx;
	margin: 20rpx 0;
	display: flex;
	align-items: center;
	box-shadow: 0 8rpx 24rpx rgba(255,107,107,0.08);
	position: relative;
	overflow: hidden;
}

.current-audio::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4rpx;
	background: linear-gradient(to right, #ff6b6b, #ffd3d3);
	opacity: 0.8;
}

.music-icon {
	width: 80rpx;
	height: 80rpx;
	margin-right: 30rpx;
	flex-shrink: 0;
}

.music-icon.playing {
	animation: bounce 0.6s infinite alternate;
}

.audio-name {
	flex: 1;
	font-size: 36rpx;
	color: #333;
	margin-right: 30rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.play-mode {
	width: 56rpx;
	height: 56rpx;
	padding: 8rpx;
	opacity: 0.8;
	transition: all 0.3s;
	flex-shrink: 0;
	background: rgba(255,107,107,0.1);
	border-radius: 50%;
}

.play-mode:active {
	opacity: 0.6;
	transform: scale(0.95);
}

.play-mode image {
	width: 100%;
	height: 100%;
	opacity: 0.8;
}

.controls {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20rpx 0;
	position: relative;
}

.control-btn {
	width: 96rpx;
	height: 96rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
	transition: all 0.3s;
}

.control-btn.play {
	width: 120rpx;
	height: 120rpx;
	background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
	box-shadow: 0 6rpx 16rpx rgba(255,107,107,0.2);
}

.control-btn:active {
	transform: scale(0.95);
	opacity: 0.9;
}

.control-btn image {
	width: 50%;
	height: 50%;
}

.control-btn.disabled {
	opacity: 0.5;
}

.playlist {
	background: #fff;
	border-radius: 24rpx;
	padding: 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);
}

.playlist-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16rpx 0;
	margin-bottom: 16rpx;
	border-bottom: 1rpx solid rgba(0,0,0,0.05);
}

.section-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.header-actions {
	display: flex;
	align-items: center;
}

.clear-btn {
	display: flex;
	align-items: center;
	padding: 10rpx 20rpx;
	margin-right: 20rpx;
	background-color: #fff;
	border-radius: 30rpx;
	font-size: 24rpx;
	color: #ff6b6b;
}

.clear-btn image {
	width: 32rpx;
	height: 32rpx;
	margin-right: 8rpx;
}

.add-btn {
	display: flex;
	align-items: center;
	background: #ff6b6b;
	padding: 12rpx 24rpx;
	border-radius: 30rpx;
	box-shadow: 0 4rpx 8rpx rgba(255,107,107,0.2);
	transition: all 0.3s;
}

.add-btn:active {
	transform: scale(0.96);
	opacity: 0.9;
}

.add-btn image {
	width: 32rpx;
	height: 32rpx;
	margin-right: 8rpx;
}

.add-btn text {
	color: #fff;
	font-size: 28rpx;
}

.playlist-content {
	margin-top: 20rpx;
}

.playlist-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx 20rpx;
	margin: 8rpx 0;
	border-radius: 16rpx;
	transition: all 0.3s;
	background: #fff;
	border: 1rpx solid rgba(0,0,0,0.03);
}

.playlist-item:last-child {
	border-bottom: none;
}

.playlist-item.active {
	background: rgba(255,107,107,0.05);
	border-color: rgba(255,107,107,0.1);
	transform: scale(1.01);
}

.playlist-item-content {
	flex: 1;
	display: flex;
	align-items: center;
	margin-right: 20rpx;
}

.item-icon {
	width: 48rpx;
	height: 48rpx;
	margin-right: 20rpx;
	opacity: 0.8;
}

.item-name {
	font-size: 28rpx;
	color: #333;
	flex: 1;
}

.playlist-item-actions {
	display: flex;
	align-items: center;
	gap: 24rpx;
}

.duration-text {
	font-size: 24rpx;
	color: #999;
	background: rgba(0,0,0,0.03);
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.delete-btn {
	width: 44rpx;
	height: 44rpx;
	padding: 8rpx;
	opacity: 0.6;
	transition: all 0.3s;
}

.delete-btn:active {
	opacity: 0.8;
	transform: scale(0.9);
}

.delete-btn image {
	width: 100%;
	height: 100%;
}

@keyframes bounce {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-10rpx);
	}
}

.progress-container {
	margin: 24rpx 0;
	padding: 0 20rpx;
}

.time-info {
	display: flex;
	justify-content: space-between;
	font-size: 24rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.progress-bar {
	position: relative;
	height: 6rpx;
	background: rgba(0,0,0,0.05);
	border-radius: 3rpx;
	margin: 20rpx 0;
	overflow: hidden;
}

.progress-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #eee;
	border-radius: 4rpx;
}

.progress-current {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: linear-gradient(to right, #ff6b6b, #ff8e8e);
	border-radius: 3rpx;
	transition: width 0.1s linear;
}

.point-a, .point-b {
	position: absolute;
	top: -6rpx;
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background: #ff6b6b;
	transform: translateX(-50%);
}

.point-a {
	background: #4CAF50;
}

.point-b {
	background: #2196F3;
}

.ab-controls {
	display: flex;
	justify-content: center;
	gap: 24rpx;
	margin-top: 24rpx;
}

.ab-btn {
	padding: 8rpx 24rpx;
	font-size: 26rpx;
	border-radius: 24rpx;
	background: #fff;
	color: #666;
	border: 1rpx solid #eee;
	transition: all 0.3s;
}

.ab-btn.active {
	background: #ff6b6b;
	color: #fff;
	border-color: #ff6b6b;
	box-shadow: 0 4rpx 8rpx rgba(255,107,107,0.2);
}

.ab-btn.clear {
	background: #f5f5f5;
	color: #999;
}

.screen-control {
	position: absolute;
	left: 20rpx;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	z-index: 100;
}

.screen-control text {
	color: #ff6b6b;  /* 改为主题色，更醒目 */
	font-size: 24rpx;
	margin-left: -5rpx;
	text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);  /* 添加白色阴影提高可读性 */
}

/* 添加分享按钮样式 */
.share-btn {
	position: absolute;
	right: 30rpx;
	width: 56rpx;
	height: 56rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	z-index: 1;
	transition: all 0.3s;
}

.share-btn:active {
	transform: scale(0.95);
	opacity: 0.8;
}

.share-btn image {
	width: 32rpx;
	height: 32rpx;
	opacity: 0.8;
}
</style>
